<template>
  <div class="container">
    <div class="app-container">
      <!--使用树形结构-->
      <el-tree :data="deps" :default-expand-all="true" :expand-on-click-node="false" :props="defaultProps">
        <template v-slot="{ data }">
          <el-row align="middle" justify="space-between" style="width: 100%;" type="flex">
            <el-col>{{ data.name }}</el-col>
            <el-col :span="4" style="width: 150px;display: flex;justify-content: space-between;">
              <span>{{ data.managerName }}</span>
              <!--$event 表示实参类型-->
              <el-dropdown trigger="click" @command="operateHandler($event, data.id)">
                <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right" /></span>
                <el-dropdown-menu>
                  <el-dropdown-item command="incr">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="decr">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!--使用sync修饰符-->
    <!--通过ref可以获取子组件的自定义方法的实例方法-->
    <department-dialog ref="editDept" :current-dept-id="currentDeptId" :is-show.sync="isShow" :title="title"
                       @updateDepartment="getDepartment" />
  </div>
</template>

<script>
import { getDepartmentList, deleteDepartment } from '@/api/department.js'
import { transListToTreeData } from '@/utils/index.js'
import DepartmentDialog from '@/views/department/components/department-dialog.vue'

export default {
  name: 'Department',
  components: { DepartmentDialog },
  data() {
    return {
      currentDeptId: null,
      deps: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      isShow: false,
      title: '',
      confirmDialog: false
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    // 获取部门列表
    async getDepartment() {
      const res = await getDepartmentList()
      this.deps = transListToTreeData(res, 0)
    },
    // 操作部门列表
    operateHandler(command, id) {
      if (command === 'incr') {
        this.isShow = true // 开启弹框
        this.title = '添加部门' // 设置弹框标题
        this.currentDeptId = id // 记录部门id
      } else if (command === 'edit') {
        this.isShow = true // 开启弹框
        this.title = '编辑部门' // 设置弹框标题
        this.currentDeptId = id // 记录部门id
        // $nextTick方法会等待DOM渲染完成后执行
        this.$nextTick(() => {
          this.$refs.editDept.getDepartmentDetail() // 获取子组件的实例方法
        })
      } else {
        this.confirmDialog = true
        // 确认删除提示框
        this.$confirm('您确定要删除该部门吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          beforeClose: async (action, instance, done) => {
            if (action === 'confirm') {
              /**
               * action 的值为'confirm', 'cancel'或'close'；
               * instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；
               * done 用于关闭 MessageBox 实例
               */
              instance.confirmButtonLoading = true // 开启loading效果
              // await this.delDept(id) // 发起删除请求
              await deleteDepartment(id).then(() => {
                // 重新渲染组件
                this.getDepartment()
                // 提示删除成功信息
                this.$message.success('删除部门成功')
              }).catch()
                .finally(() => {
                  instance.confirmButtonLoading = false // 关闭loading效果
                  done() // 关闭提示框
                })
            } else {
              done()
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
